<template>
  <div class="replace-box">
    <iu-header>
      <template #left>
        <x-icon @click="back" type="ios-arrow-back" size="21" fill="#fff"></x-icon>
      </template>
      <template #title>{{ detail.name || detail.checkStandardItemName }}</template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="content">
      <div class="cate-nfo">
        <div class="info-list">
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">*</span>
              <span class="contentLeftFont">工作部门</span>
            </div>
            <div class="contentRight">
              <organization
                class="changeDep"
                :selectDepartment="{
                  departmentName: formData.departmentName,
                }"
                :treeData="userServiceArea"
                @department_select="departmentSelected"
                ref="department"
                :style="{
                  color: formData.departmentId ? '#fff!important' : '#6f6f77!important',
                }"
              >
              </organization>
            </div>
          </div>
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">&nbsp;</span>
              <span class="contentLeftFont">设备</span>
            </div>
            <div class="contentRight">
              <device
                :deviceId="departmentId"
                :initDeviceName="formData.deviceName"
                @getDeviceData="getDevice"
                ref="devices"
                :style="{
                  color: formData.deviceId ? '#fff!important' : '#6f6f77!important',
                }"
              ></device>
            </div>
          </div>
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">*</span>
              <span class="contentLeftFont">工作位置：</span>
            </div>
            <div class="contentRight">
              <select class="iu-select" required v-model="formData.workLocation">
                <option disabled selected hidden value>
                  - 请选择工作位置
                </option>
                <option :value="item.value" v-for="item in workLocationOptions" :key="item.value">{{ item.label }}</option>
              </select>
            </div>
          </div>
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">*</span>
              <span class="contentLeftFont">工作类型：</span>
            </div>
            <div class="contentRight">
              <select class="iu-select" required v-model="formData.workType">
                <option disabled selected hidden value>
                  - 请选择隐患类型
                </option>
                <option :value="item.value" v-for="item in workTypeOptions" :key="item.value">{{ item.label }}</option>
              </select>
            </div>
          </div>
          <div class="contentList full">
            <div class="contentLeft">
              <span class="notNull">*</span>
              <span class="contentLeftFont">工作内容：</span>
            </div>
            <div class="contentRight">
              <textarea name="userQuestion" v-model="formData.workDetails" placeholder="请输入工作内容" class="userQuestion" maxlength="300"></textarea>
            </div>
          </div>
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">*</span>
              <span class="contentLeftFont">开始时间</span>
            </div>
            <div class="contentRight border" @click="selectTime('bengin')">
              <span v-if="formData.beginTime">
                {{ formData.beginTime | formatDate('YYYY-MM-DD HH:mm') }}
              </span>
              <span v-else style="color:rgb(111, 111, 119);font-size:16px">
                开始时间
              </span>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">*</span>
              <span class="contentLeftFont">结束时间</span>
            </div>
            <div class="contentRight border" @click="selectTime">
              <span v-if="formData.endTime">
                {{ formData.endTime | formatDate('YYYY-MM-DD HH:mm') }}
              </span>
              <span v-else style="color:rgb(111, 111, 119);font-size:16px">
                结束时间
              </span>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">&nbsp;</span>
              <span class="contentLeftFont">历时</span>
            </div>
            <div class="contentRight" style="text-align: right;">
              {{ duration }}
            </div>
          </div>
        </div>

        <div class="info-list" v-for="(joinUser, joinUserIndex) in formData.joinUserList" :key="'user' + joinUserIndex">
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">*</span>
              <span class="contentLeftFont">参与人</span>
            </div>
            <div class="contentRight" v-if="!isDetail">
              <x-icon type="ios-plus-outline" size="24" fill="#fff" style="float: right;" v-if="!joinUserIndex" @click.native="eventJoinUserAdd"></x-icon>
              <x-icon type="ios-close-outline" size="24" fill="#fff" style="float: right;" v-else @click.native="eventJoinUserRemove(joinUserIndex)"></x-icon>
            </div>
          </div>
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">&nbsp;</span>
              <span class="contentLeftFont">人员：</span>
            </div>
            <div class="contentRight">
              <fz-people
                class="changeDep"
                :peopleId="formData.departmentId"
                :leader="joinUser.userId"
                :peopleData="userList"
                :name="joinUser.userName || '选择参与人'"
                @selectPeople="getPeople($event, joinUserIndex)"
                :style="{
                  color: joinUser.userId ? '#fff!important' : '#6f6f77!important',
                }"
              >
              </fz-people>
            </div>
          </div>
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">&nbsp;</span>
              <span class="contentLeftFont">参与状态：</span>
            </div>
            <div class="contentRight">
              <select class="iu-select" required v-model="joinUser.joinType" @change="eventJoinTypeChange(joinUserIndex)">
                <option disabled selected hidden value>
                  - 请选择参与状态
                </option>
                <option :value="0">全程</option>
                <option :value="1">部分</option>
              </select>
            </div>
          </div>
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">&nbsp;</span>
              <span class="contentLeftFont">用时( 分钟 )：</span>
            </div>
            <div class="contentRight border">
              <template v-if="joinUser.joinType === 1">
                <input type="text" v-model="joinUser.joinTime" placeholder="请输入用时" maxlength="10" />
              </template>
              <template v-else>
                {{ getTime(joinUser.joinTime * 60 * 1000) || '&nbsp;' }}
              </template>
            </div>
          </div>
        </div>
        <div class="info-list">
          <div class="contentList">
            <div class="contentLeft">
              <span class="notNull">&nbsp;</span>
              <span class="contentLeftFont">所用工时：</span>
            </div>
            <div class="contentRight">
              {{ useTime }}
            </div>
          </div>
        </div>
      </div>
      <template v-if="!formData.id || formData.createUser === user.id">
        <div class="contentList" v-if="!isDetail">
          <button type="button" class="subBtn" v-if="formData.state < 1" @click="eventSubmit(0)" style="background-color: #d6971f;">保存</button>
          <button type="button" class="subBtn" @click="eventSubmit(1)">提交</button>
          <button type="button" class="subBtn" v-if="dayjs().diff(formData.createTime, 'day') < 1 && formData.state === 1" @click="eventStateSubmit">作废</button>
        </div>
        <div class="contentList" v-else>
          <button type="button" class="subBtn" v-if="dayjs().diff(formData.createTime, 'day') < 1 && formData.state === 1" @click="eventStateSubmit">作废</button>
        </div>
      </template>

      <div class="is-detail" :class="{ mark: isDetail }"></div>
    </div>
    <div v-transfer-dom>
      <confirm v-model="showConfirm" title="提示" @on-cancel="onCancel" @on-confirm="handleStateSubmit">
        <p>
          确认作废？
        </p>
      </confirm>
    </div>
  </div>
</template>

<script>
import Organization from '@/components/common/replace/sellWorkOrderDepartment';
import fzPeople from '@/components/common/replace/sellWorkOrderPeople';
import device from '@/components/common/device';

import WorkLogsDao from '@/daos/work_logs_dao';
import TaskDao from '@/daos/task_dao';

import iuHeader from '@/components/common/header/index';
import upload from '@/components/common/upload/upload';
import { TransferDom, Checker, CheckerItem, Confirm } from 'vux';
import dayjs from 'dayjs';
export default {
  name: 'safetyCheckResult',
  directives: {
    TransferDom,
  },
  components: {
    fzPeople,
    Organization,
    device,
    iuHeader,
    upload,
    Confirm,
    Checker,
    CheckerItem,
  },
  data() {
    return {
      dayjs,
      userQuestion: '',
      result: 1,
      listValue: 0,
      remark: '',
      leader: '',
      departmentId: '', //部门id
      departmentName: '',
      getSelectDevice: {}, //获取设备
      showConfirm: false,
      deviceIdshow: false,
      partsIdshow: false,
      value: false,
      workTypeOptions: [
        { value: 1, label: '自动化检修' },
        { value: 2, label: '巡检' },
        { value: 3, label: '设备安装' },
        { value: 4, label: '设备维修' },
        { value: 10, label: '沟通协调' },
        { value: 11, label: '故障上报' },
        { value: 12, label: '会议' },
        { value: 6, label: '备品、备件更换' },
        { value: 7, label: '通讯维修(光缆、监控等)' },
        { value: 8, label: '仪器校准(皮带秤、料位计等)' },
        { value: 9, label: '其他' },
      ],
      workLocationOptions: [
        { value: 1, label: '采区' },
        { value: 2, label: '破碎(圆锥破碎、中细碎等)' },
        { value: 3, label: '选矿(球磨、干选等)' },
        { value: 10, label: '磅房' },
        { value: 9, label: '中控室' },
        { value: 4, label: '尾矿库' },
        { value: 5, label: '配电室' },
        { value: 6, label: '排土场' },
        { value: 7, label: '监控' },
        { value: 8, label: '其他' },
      ],
      stateOptions: ['未提交', '已提交', '作废'],
      url: '',
      pictureList: [],
      deviceData: [],
      peopleData: [],
      departmentList: {},
      userList: [],
      loading: false,
      isDetail: false,
      id: 0,
      isLastLevel: 0,
      edit: false,
      detail: {},
      formData: {
        beginTime: '',
        departmentId: '',
        deviceId: '',
        endTime: '',
        joinUserList: [
          {
            joinTime: '',
            joinType: '',
            userId: '',
          },
        ],
        state: '',
        workDetails: '',
        workLocation: '',
        workType: '',
        id: null,
      },
      store: {},
      curDepartment: {
        departmentName: '选择部门',
        id: -1,
      },
    };
  },
  //返回首页的公共方法
  inject: ['backToHomepage'],
  created() {
    this.init();
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    userServiceArea() {
      if (this.$store.state.user) {
        let serviceAreaTree = this.$store.state.user.serviceAreaTree;
        serviceAreaTree.departmentName = '选择部门';
        serviceAreaTree.id = '';
        return serviceAreaTree;
      } else {
        return {};
      }
    },
    standard() {
      return this.$store.state.safetyCheck.standard;
    },
    duration() {
      if (!this.formData.beginTime || !this.formData.endTime) {
        return '';
      }
      let millisecond = dayjs(this.formData.endTime).diff(this.formData.beginTime);
      return this.getTime(millisecond);
    },
    useTime() {
      let minute = this.formData.joinUserList.reduce((a, b) => {
        if (b.joinType === 0) {
          b.joinTime = dayjs(this.formData.endTime).diff(this.formData.beginTime, 'minute') || 0;
        }
        return a + +b.joinTime;
      }, 0);
      return this.getTime(minute * 60 * 1000);
    },
  },
  methods: {
    recovery() {
      window.scroll(0, 0);
    },
    back() {
      this.$router.go(-1);
    },
    init() {
      if (!this.user) {
        this.getUserInfo();
      } else {
        this.store.formData = JSON.parse(JSON.stringify(this.formData));
        if (this.$route.query.id) {
          this.edit = true;
          this.formData.id = this.$route.query.id;
          this.getDetail(this.formData.id);
        }
      }
    },
    initEdit() {
      this.edit = true;
      if (this.detail.checkImage) {
        this.pictureList = this.detail.checkImage.split(',');
      }
      if (this.detail.wxCheckTroubleRes) {
        Object.assign(this.formData, this.detail.wxCheckTroubleRes);
      }
    },
    getUserInfo() {
      this.$http(this.$API.getUserInfo, {}).then((res) => {
        this.$store.commit('saveUser', res);
        this.init();
      });
    },
    // 当点击完成时，获取处理人
    getPeople(item, joinUserIndex) {
      if (!!item.id) {
        this.formData.joinUserList[joinUserIndex].userId = item.id;
      }
    },
    getDetail(id) {
      WorkLogsDao.getWorkLogById(id, (res) => {
        if (res) {
          Object.assign(this.formData, res);
          this.curDepartment.id = this.formData.departmentId;
          this.curDepartment.departmentName = this.formData.departmentName;
          this.departmentId = this.formData.departmentId;
          this.getLeaderByDepartment(this.departmentId);
          if (dayjs().diff(this.formData.createTime, 'day') >= 1 || this.formData.state >= 1 || this.formData.createUser !== this.user.id) {
            this.isDetail = true;
          }
        }
      });
    },
    getLeaderByDepartment(departmentId) {
      TaskDao.getAdminister(departmentId, (data) => {
        if (data) {
          this.userList = data;
        }
      });
    },
    eventCheckItem(value) {
      this.formData.errorValue = value.slice(1);
    },
    // 点击完成的时候，获取部门数据
    departmentSelected(params) {
      if (!!params.id) {
        this.curDepartment = params;
        this.departmentId = this.formData.departmentId = params.id;
        this.formData.departmentName = params.departmentName;

        this.getLeaderByDepartment(this.departmentId);
        this.$nextTick((e) => {
          // 清空设备
          this.formData.deviceId = '';
          //   this.$refs.devices.selectdeviceData = '';
        });
      } else {
        this.departmentId = this.curDepartment.id;
      }
    },
    // 获取设备数据
    getDevice(data) {
      if (!!data.id) {
        this.getSelectDevice = data;
        this.deviceId = data.id || null;
        this.formData.deviceId = data.id;
        // 清空部件
        // this.partsId = "";
        // this.$refs.parts.selectPartsName = "";
      }
      if (!data.id) {
        this.deviceIdshow = false;
      } else {
        this.deviceIdshow = true;
      }
    },
    cancel() {
      this.back();
    },
    onCancel() {
      this.showConfirm = false;
    },
    eventJoinUserAdd() {
      this.formData.joinUserList.push({
        joinTime: '',
        joinType: '',
        userId: '',
        userName: '',
      });
    },
    eventJoinUserRemove(index) {
      this.formData.joinUserList.splice(index, 1);
    },
    eventJoinTypeChange(index) {
      this.formData.joinUserList[index].joinTime = '';
    },
    eventSubmit(state) {
      let text = '';
      let params = {
        ...this.formData,
        state,
      };

      params.joinUserList = params.joinUserList.filter((e) => e.userId);
      params.joinUserList.forEach((element) => {
        if (element.joinType === 0) {
          element.joinTime = dayjs(params.endTime).diff(params.beginTime, 'minute') || 0;
        } else if (element.joinTime === '' || !this.isNumber(element.joinTime)) {
          text = '参与时间请输入数字';
        } else if (element.joinType === '') {
          text = '请选择参与状态';
        }
      });
      if (!params.workDetails) {
        text = '请输入工作内容';
      } else if (!params.workLocation) {
        text = '请选择工作位置';
      } else if (!params.workType) {
        text = '请选择工作类型';
      } else if (!params.departmentId) {
        text = '请选择工作部门';
      } else if (!params.joinUserList.length) {
        text = '请添加参与人';
      } else if (!params.beginTime) {
        text = '请选择开始时间';
      } else if (!params.beginTime) {
        text = '请选择结束时间';
      } else if (!dayjs(params.beginTime).isBefore(params.endTime)) {
        text = '结束时间请大于开始时间';
      }
      if (text) {
        this.$vux.toast.show({ text, type: 'warn' });
        return;
      }
      this.$vux.loading.show({
        text: '提交中...',
      });

      WorkLogsDao[this.edit ? 'putWorkLog' : 'postWorkLog'](params, () => {
        this.$vux.loading.hide();
        this.$vux.toast.show({ text: '保存成功！', type: 'success' });
        this.back();
      });
    },
    eventStateSubmit() {
      this.showConfirm = true;
    },
    handleStateSubmit() {
      WorkLogsDao.putWorkLogState({ id: this.formData.id, state: 2 }, () => {
        this.$vux.toast.show({ text: '作废成功', type: 'success' });
        this.back();
      });
    },
    formDataInit() {
      this.formData = JSON.parse(JSON.stringify(this.store.formData));
      this.remark = '';
    },
    getTime(inputTime) {
      let days = inputTime / 1000 / 60 / 60 / 24;
      let daysRound = Math.floor(days);
      let hours = inputTime / 1000 / 60 / 60 - 24 * daysRound;
      let hoursRound = Math.floor(hours);
      let minutes = inputTime / 1000 / 60 - 24 * 60 * daysRound - 60 * hoursRound;
      let minutesRound = Math.floor(minutes);
      // let seconds = inputTime / 1000 - 24 * 60 * 60 * daysRound - 60 * 60 * hoursRound - 60 * minutesRound;
      // console.log('转换时间:', daysRound + '天', hoursRound + '时', minutesRound + '分', seconds.toFixed(0) + '秒');
      let time = '';
      if (daysRound > 0) {
        time = daysRound + ' 天 ' + hoursRound + ' 时 ' + minutesRound + ' 分 ';
      } else if (hoursRound > 0) {
        time = hoursRound + ' 时 ' + minutesRound + ' 分 ';
      } else if (minutesRound > 0) {
        time = minutesRound + ' 分 ';
      }
      return time;
    },
    isNumber(target, digits = 0) {
      let reg = !digits ? new RegExp('^-?\\d*$') : new RegExp(`^-?(\\d*|\\d*\\.\\d{1,${digits}}}?)$`);
      return reg.test(target);
    },
    selectTime(tag) {
      let _this = this;
      let now = dayjs();
      this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        format: 'YYYY-MM-DD HH:mm',
        startDate: now.startOf('month').format('YYYY-MM-DD'),
        onConfirm(value) {
          if (tag === 'bengin') {
            _this.formData.beginTime = dayjs(value);
          } else {
            _this.formData.endTime = dayjs(value);
          }
        },
        onHide(type) {
          if (type === 'cancel') {
            // that.banci = value
          }
        },
      });
    },
  },
};
</script>
<style lang="less">
.replace-box {
  .vux-x-switch.weui-cell_switch {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .vux-tap-active:active {
    background: none;
  }
}
</style>
<style lang="less" scoped>
textarea::-webkit-input-placeholder {
  color: rgb(111, 111, 119) !important;
}
textarea:-moz-placeholder  {
  color: rgb(111, 111, 119) !important;
}

textarea::-moz-placeholder  {
  color: rgb(111, 111, 119) !important;
}
textarea:-ms-input-placeholder  {
  color: rgb(111, 111, 119) !important;
}

input {
  &::placeholder {
    font-size: 14px;
    color: gray !important;
  }
}
* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
}
html,
body {
  width: 100%;
}
.replace-box {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: #18182c;
}
.backHistory {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
  -o-transform: rotate(90deg);
  line-height: 40px;
  font-size: 25px !important;
  margin-left: 10px;
}
.pageTop {
  height: 40px;
  color: #fff;
  position: fixed;
  height: 40px;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: #22233f;
  z-index: 9;
  .sellWorkOrder_header_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
}
.content {
  width: 100%;
  height: 100%;
  // overflow-y: auto;
  padding: 0 8px 20px;
  box-sizing: border-box;
  background-color: #18182c;
  position: relative;
}
.is-detail {
  position: absolute;
  top: 0;
  bottom: 100px;
  left: 0;
  right: 0;
  z-index: 10;
  display: none;
  &.mark {
    display: flex;
  }
}
.cate-nfo {
  height: auto;
  // min-height: calc(~"100vh" - 80px);
  padding-bottom: 8px;
  border-radius: 8px;
  background-color: #18182c;
  .info-list {
    background: #22233f;
    padding: 8px;
    margin: 8px 0;
    // min-height: 260px;
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
      margin: 8px 0;
    }
    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      // margin-right: 30px;
      width: 100px;
      text-align: right;
    }

    .info-value {
      flex: 1;
      font-size: 16px;
      color: #fff;

      .status1,
      .status4 {
        color: #4fa8e7;
      }
      .status3 {
        color: #456de6;
      }
      .status5,
      .status7,
      .status11 {
        color: #dd9710;
      }
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }
    }
    .modify-btn {
      font-size: 14px;
      margin-left: 8px;
      color: gray;
    }
    .warning {
      color: #ff2c2c;
    }
    .modify {
      font-size: 16px;
      padding: 8px;
      color: rgba(255, 255, 255, 0.5);
    }
  }
}
.contentList {
  padding: 8px 0;
  overflow: hidden;
  // border-bottom: 1px solid #464656;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  -webkit-text-size-adjust: 100% !important;
  &.full {
    flex-wrap: wrap;
    .contentRight {
      width: 100%;
      margin-top: 3px;
    }
  }
  &.user-list {
    justify-content: flex-start;
    > div {
      width: 33%;
      flex: 1;
    }
  }
  .err-msg {
    flex: none;
    width: 100%;
    color: #ff2c2c;
    font-size: 12px !important;
    padding-left: 35%;
    -webkit-text-size-adjust: 100% !important;
  }
}

.upload {
  display: flex;
  flex-direction: column;
  // align-items: center;
  justify-content: space-between;
}
.contentLeft,
.contentRight {
  font-size: 17px;
}
.contentLeft {
  color: #ffffff;
  flex: none;
}
.contentRight {
  position: relative;
  color: #fff;
  box-sizing: border-box;
  width: 65%;

  .produce-data-list-read {
    padding: 8px 0;
    .read-item {
      border: 1px solid #777;
      padding: 5px 15px;
      margin-right: 5px;
    }
    .read-item-selected {
      border: 1px solid #177fff;
    }
  }
  .iu-select {
    text-align: right;
  }
  &.border {
    // border-bottom: 0.026667rem solid #464656;
    display: flex;
    justify-content: flex-end;
  }
  input {
    text-align: right;
    touch-action: none;
    width: 86%;
    border: 0;
    color: #ffffff;
    font-size: 16px;
    margin-right: 4px;
    &.full {
      width: 100%;
    }
  }
}
.cancelPos {
  position: static;
  width: auto !important;
}
.notNull {
  color: #d81e06;
}

.userQuestion {
  font-size: 17px;
  width: 100%;
  height: 100px;
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid #747480;
  color: #fff;
  text-align: left !important;
}
.userQuestion::-webkit-input-placeholder {
  color: #6f6f77;
  text-align: left;
}
.subBtn {
  width: 40%;
  height: 40px;
  line-height: 1;
  padding: 13px 0;
  box-sizing: border-box;
  text-align: center;
  margin: 0 auto;
  border-radius: 13px;
  background-color: #456de6;
  color: #ffffff;
  margin: 0 4%;
  font-size: 17px;
  margin-top: 0;
  &.is-edited {
    color: #d2d2d2;
    background-color: gray;
  }
}
.iu-select {
  height: 26px;
  width: 100%;
  padding: 2px 4px 3px;
  border: none;
  outline: none;
  border: 1px solid #eee;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  background: transparent;
  option {
    color: #000;
    background: rgba(255, 255, 255, 0.9);
  }
  &:invalid {
    color: #999;
  }
}
</style>
